<style lang='scss' scoped>
.setuserinfo {
    width: 100%;
    height: 99.9%;
    font-size: 0.8rem;
    .contentbox {
        padding: 0.8rem;
        .userimage {
            margin-top: 3rem;
            text-align: center;
            position: relative;
            .touxiang {
                width: 5rem;
                border-radius: 50%;
                vertical-align: middle;
            }
            .xianji {
                position: absolute;
                width: 1.5rem;
                vertical-align: middle;
                bottom: 0;
                left: 55%;
            }
        }
        .user_list {
            margin-top: 2rem;
            border-radius: 0.5rem;
            background-color: #fff;
            .list {
                display: flex;
                justify-content: space-between;
                padding: 1rem;
            }
            // 第一个 第二个
            .list:nth-child(1),
            .list:nth-child(2) {
                border-bottom: 1px solid #f5f5f5;
            }
        }
        .footer_list {
            margin-top: 1rem;
            border-radius: 0.5rem;
            background-color: #fff;
            .list {
                display: flex;
                justify-content: space-between;
                padding: 1rem;
            }
        }
        .footer_button {
            margin-top: 3rem;
            .button {
                width: 100%;
                padding: 0.6rem;
                text-align: center;
                border-radius: 1rem;
                background: linear-gradient(135deg, #fe850c 0%, #fe523e 100%);
                color: #fff;
            }
        }
    }
}
</style>

<template>
    <view class='setuserinfo'>
        <u-navbar title="用户信息"> </u-navbar>
        <view class="contentbox">
            <view class="userimage">
                <image class="touxiang" :src="state.user_info?.userInfo?.avatar" mode="widthFix" />
                <image class="xianji" src="../../static/images/user/camera.png" mode="widthFix" @click="setuseravatar" />
            </view>
            <view class="user_list">
                <view class="list">
                    <view class="name">
                        我的ID
                    </view>
                    <view class="text">
                        {{ state.user_info?.userInfo?.user_id  || ''}}
                    </view>
                </view>
                <view class="list" @click="gopathsetusername">
                    <view class="name">
                        我的昵称
                    </view>
                    <view class="text">
                        {{ state.user_info?.userInfo?.nickname  || ''}}
                        &nbsp;
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view class="list">
                    <view class="name">
                        手机号码
                    </view>
                    <view class="text">
                        {{ state.user_info?.userInfo?.account  || ''}}
                    </view>
                </view>
            </view>
            <view class="footer_list">
                <view class="list">
                    <view class="name">
                        修改密码
                    </view>
                    <view class="text">
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <view class="footer_button">
                <view class="button" @click="handeltuichu">
                    退出登录
                </view>
            </view>
            <!-- 头像裁减 -S -->
            <cropper ref="cropperImg" selWidth="660rpx" selHeight="660rpx" @getImg="getImg" :imgSrc="state.imgurl" avatarStyle="width:100vw;height:100vw;">
            </cropper>
            <!-- 头像裁减 -E -->
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import cropper from "@/components/cropper/cropper.vue";
import {
    UploadgetToken,
    setFileKEY,
    setUserInfo,
    getUserInfo,
} from "@/api/user.ts";
import { base64png } from "@/utils/base64fun.ts";
import { qiNiuUpload } from "@/utils/qiniu.ts";
import { pathToBase64, base64ToPath } from "image-tools";
components: {
    cropper;
}
const cropperImg = ref(null);
const state = reactive<{
    user_info: object;
    imgurl: string;
}>({
    imgurl: "",
    user_info: {},
});
onShow(() => {
    localData();
});
// 本地数据
const localData = () => {
    let user_info = uni.getStorageSync("user_info");
    state.user_info = user_info;
};
// 设置头像
const setuseravatar = () => {
    // #ifdef APP-PLUS
    uni.$u.toast("暂不支持修改头像");
    // #endif

    // #ifdef H5
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
            state.imgurl = res.tempFilePaths[0];
        },
    });
    // #endif
};
// 获取图片
const getImg = async (resFile: string) => {
    let File = await base64png(resFile);
    await UploadgetToken().then((res) => {
        let htturl = res.domain;
        let token = res.token;
        qiNiuUpload("uploads/images/", ".png", File, token).then((res) => {
            let imgurl = htturl + "/" + res.key;
            try {
                setFileKEY({ url: imgurl });
                setUserInfo({ avatar: imgurl });
                getUserInfo().then((user_info) => {
                    state.user_info = user_info;
                    uni.setStorageSync("user_info", user_info);
                });
            } catch (err) {
                console.log(err);
            }
        });
    });
};
// 退出登录
const handeltuichu = () => {
    uni.showModal({
        title: "提示",
        content: "确定退出登录吗？",
        success: function (res) {
            if (res.confirm) {
                uni.clearStorageSync();
                uni.reLaunch({
                    url: "/pages/login/login",
                });
            } else if (res.cancel) {
                console.log("用户点击取消");
            }
        },
    });
};
// 跳转修改昵称
const gopathsetusername = () => {
    uni.navigateTo({
        url: "/pages/user/setusername",
    });
};
</script>